<template>
  <div class="licen d-flex">
    <div class="province">
      <Input
        :maxlength="1"
        v-model="obj.msg"
        placeholder="例：鲁"
        style="width: 50px"
        @on-change="changeInput('msg')"
      />
      <popVue
        :list="tagList"
        title="车牌省份"
        @setRecord="setRecord"
        fieldName="msg"
        v-model="obj.msg"
      ></popVue>
    </div>
    <div class="zimu">
      <Input
        :maxlength="1"
        v-model="obj.zimu"
        placeholder="例：B"
        style="width: 50px"
        @on-change="changeInput('zimu')"
      />
      <popVue
        :list="zimuList"
        title="车牌字母"
        @setRecord="setRecord"
        fieldName="zimu"
        v-model="obj.zimu"
      ></popVue>
    </div>
    <div class="inputs">
      <Input
        :maxlength="types == 2 ? 6 : 5"
        v-model="obj.ins"
        :ref="'ins'"
        placeholder="请输入车牌信息"
        style="width: 220px"
        @on-change="changeIns"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "licen",
  props: {
    // 车牌 ‘省份’
    msg: {
      type: String,
      default: () => "",
    },
    // 车牌 ‘字母’
    zimu: {
      type: String,
      default: () => "",
    },
    // 车牌信息
    ins: {
      type: String,
      default: () => "",
    },
    // 车牌类型
    types: {
      type: [Number, String],
      default: () => "2",
    },
  },
  components: {
    popVue: () => import("./popVue"),
  },
  watch: {
    msg: {
      handler(nval) {
        this.$set(this.obj, "msg", nval);
      },
      deep: true,
    },
    zimu: {
      handler(nval) {
        this.$set(this.obj, "zimu", nval);
      },
      deep: true,
    },
    ins: {
      handler(nval) {
        this.$set(this.obj, "ins", nval);
      },
      deep: true,
    },
  },
  data() {
    return {
      tagList: [
        "鲁",
        "京",
        "津",
        "冀",
        "沪",
        "豫",
        "皖",
        "陕",
        "晋",
        "浙",
        "川",
        "黑",
        "吉",
        "辽",
        "渝",
        "苏",
        "青",
        "蒙",
        "桂",
        "宁",
        "湘",
        "甘",
        "贵",
        "云",
        "新",
        "鄂",
        "闽",
        "赣",
        "琼",
        "藏",
        "粤",
        "港",
        "澳",
        "台",
        "",
      ],
      zimuList: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
      obj: {
        msg: "",
        zimu: "",
        ins: "",
      },
    };
  },

  mounted() {
    // 每次加载 默认都设置为鲁B
    this.$emit("update:msg", "鲁");
    this.$emit("update:zimu", "B");
  },

  methods: {
    // 输入下拉框
    changeInput(fieldName) {
      this.$emit(`update:${fieldName}`, event.data.toUpperCase());
    },
    // 设置值
    setRecord(item, fieldName) {
      this.$emit(`update:${fieldName}`, item);
    },
    // 输入值 Input框 更改ins值
    changeIns(val) {
      this.$emit(`update:ins`, this.obj.ins.toUpperCase());
    },
  },
};
</script>

<style lang="scss" scoped>
.licen ::v-deep {
  width: 100%;
  gap: 0 10px;
}
</style>
